<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { queryInstallDetail } from '@/api/device-management/install';

  const emits = defineEmits(['ok', 'cancel']);
  const props = defineProps({
    deviceId: String,
  });
  const itemDetails = ref<any>({});

  watch(
    () => props.deviceId,
    (newVal) => {
      if (newVal) {
        queryInstallDetail(newVal)
          .then((res) => {
            itemDetails.value = res;
            console.log(itemDetails.value);
          })
          .catch((err) => {});
      }
    },
    { immediate: true }
  );
</script>

<template>
  <div class="m-install-details">
    <a-drawer
      :width="400"
      :visible="!!props.deviceId"
      :footer="false"
      title="绑定详情"
      unmount-on-close
      @cancel="emits('cancel')"
    >
      <div>
        <div class="m-id-block">
          <div class="title"><span>客户信息</span></div>
          <ul class="content">
            <li
              ><span class="label">客户姓名</span
              ><span class="value">{{ itemDetails.customerName }}</span></li
            >
            <li
              ><span class="label">客户性别</span
              ><span class="value">{{ itemDetails.customerGender }}</span></li
            >
            <li
              ><span class="label">关联站点</span
              ><span class="value">{{ itemDetails.stationName }}</span></li
            >
          </ul>
        </div>
        <div class="m-id-block">
          <div class="title"><span>设备信息</span></div>
          <ul class="content">
            <li
              ><span class="label">设备ID</span
              ><span class="value">{{ itemDetails.deviceId }}</span></li
            >
            <li
              ><span class="label">设备名称</span
              ><span class="value">{{ itemDetails.deviceName }}</span></li
            >
            <li
              ><span class="label">设备型号</span
              ><span class="value">{{ itemDetails.modelCode }}</span></li
            >
            <li
              ><span class="label">设备编码</span
              ><span class="value">{{ itemDetails.deviceCode }}</span></li
            >
            <li style="display: flex; align-items: start">
              <span class="label">设备图片</span>
              <span class="value">
                <a-image
                  width="128"
                  height="64"
                  :src="itemDetails.iconUrl"
                />
              </span>
            </li>
          </ul>
        </div>
        <div class="m-id-block">
          <div class="title"><span>绑定信息</span></div>
          <ul class="content">
            <li
              ><span class="label">绑定地点</span
              ><span class="value">{{ itemDetails.installAddress }}</span></li
            >
            <!-- <li
              ><span class="label">绑定位置</span
              ><span class="value">{{ itemDetails.installLocation }}</span></li
            > -->
            <li
              ><span class="label">绑定人员</span
              ><span class="value">{{ itemDetails.installStaffName }}</span></li
            >
            <li
              ><span class="label">绑定时间</span
              ><span class="value">{{ itemDetails.installTime }}</span></li
            >
          </ul>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<style lang="less" scoped>
  .m-install-details {
  }
  .m-id-block {
    background-color: rgb(var(--arcoblue-1));
    padding: 15px;
    padding-top: 10px;
    border-radius: 4px;
    margin-bottom: 15px;

    .title {
      font-weight: 600;
    }

    .content {
      margin-top: 10px;
      // background-color: var(--color-neutral-1);
      // [zxj:update] 按要求修改
      background-color: #fff;
      padding: 10px 20px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      row-gap: 6px;

      & > li {
        max-width: 100%;
        display: flex;
        align-items: center;
      }

      .label {
        display: inline-block;
        width: 70px;
        text-align: right;
        color: var(--color-text-1);
        margin-right: 15px;
        // font-weight: 600;
      }

      .value {
        display: inline-block;
        color: var(--color-text-2);
        // min-width: 60px;
        flex: 1;
        margin-right: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>
